<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item ref="name" label="用户名" name="name">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item ref="pwd" label="密码" name="pwd">
      <a-input v-model:value="formState.pwd" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">登录</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
import axios from "axios";
import { ValidateErrorEntity } from "ant-design-vue/es/form/interface";
import { Moment } from "moment";
import { defineComponent, reactive, ref, toRaw, UnwrapRef } from "vue";
import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
import ENV_URL from "../configs/httpUrl";

interface FormState {
  name: string;
  pwd: string;
}

export default defineComponent({
  setup() {
    const $router = useRouter();
    const loginData = (params) => {
      return axios.post(ENV_URL + "/home/admin/login", { ...params });
      // return axios.post("http://www.jbook.top/api/home/admin/login", { params: params });
      // return axios({
      //   url: ENV_URL + "/home/admin/login",
      //   method: "post",
      //   data: {
      //     ...params
      //   },
      //   contentType: "text",
      //   processData: false,
      //   dataType: "text"
      // });
    };
    const formRef = ref();
    const formState: UnwrapRef<FormState> = reactive({
      name: "",
      pwd: "",
    });
    const rules = {
      name: [
        { required: true, message: "请输入用户名", trigger: "change" },
        { max: 5, message: "最多输入5个字符", trigger: "change" },
      ],
      pwd: [
        { required: true, message: "请输入用户名", trigger: "change" },
        { max: 5, message: "最多输入5个字符", trigger: "change" },
      ],
    };
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          // message.success("登陆成功");
          // // 跳转menu页面
          // $router.push({ name: "menu", params: { userId: 1 } });
          loginData(formState).then((data: any) => {
            if (data) {
              message.success('登陆成功');
              // 跳转menu页面
              $router.push({ name: 'menu', params: { userId: data.userId } });
            } else {
              message.error('登陆失败');
            }
          });
        })
        .catch((error: ValidateErrorEntity<FormState>) => {
          // console.log('error', error);
        });
    };
    return {
      formRef,
      labelCol: { span: 8 },
      wrapperCol: { span: 8 },
      other: "",
      formState,
      rules,
      onSubmit,
    };
  },
});
</script>